//浏览器本地存储
// localStorage
// sessionStorage
// cookie
//共同点：都可以来做浏览器本地存储，比如做token的管理（存，取，删）
//区别：
// localStorage：永久存储，除非主动删除
// sessionStorage 会话存储，关掉浏览器网页自动删除
// localStorage：同域名不同浏览器标签页可以共享
// sessionStorage：只能在当前浏览器的标签页下使用
//不同源的本地存储不共享

//cookie的区别：他会自动在浏览器携带给后台，而localStorage和sessionStorage需要自己拼接



import Cookies from 'js-cookie'
// js-cookie 封装了set和get可以设置浏览器cookie存取
//本地存储的都是字符串（即使是对象/数组也要转成JSON字符串存入）
const state = {
  sidebar: {//侧边栏配置对象
    //目标：
    //open为true，表示侧边栏打开
    //open为false，表示侧边栏关闭
    //小目标：默认字符串为'0'的时候是关闭状态，如何把'0'转化为flase？
    //默认字符串'0'代表侧边栏关闭
    //1.把字符串0转换为数字0：+'0'结果是数字0，然后0是false，1是true
    //2.把数字0转成布尔类型: !0 ,!取反的结果 true
    //3.发现!+'0'结果竟然变成true, 意思'0'要关闭状态opened值应该为false, 所以再次取反
    // 最后!!+'0' 结果为 false
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    //目标：
    //open为true，表示侧边栏打开
    //open为false，表示侧边栏关闭
    //小目标：默认字符串为'1'的时候是打开状态，如何把'1'转化为true？
    //默认字符串'1'代表侧边栏打开
    //1.把字符串1转换为数字1：+'1'结果是数字1，然后0是false，1是true
    //2.把数字1转成布尔类型: !1 ,!取反的结果 false
    //3.发现!+'1'结果竟然变成false, 意思'1'要打开状态opened值应该为true, 所以再次取反
    // 最后!!+'1' 结果为 true
    withoutAnimation: false//默认不使用动画，不生效，用动画
    //为何不在浏览器里直接存false和true？
    //原因：true和false存到浏览器里全变成字符串都为真了

  },
  device: 'desktop'//设备标记
}
// 学到了经验
// 本地'0'和'1'分别要转成false和true, !!+就可以了
// 默认有值无论'0'和'1'都走?后面
// 默认无值直接走:后面, 默认让侧边栏打开






const mutations = {//唯一能修改state变量值的地方
  //函数名：function(){}
  //函数名(){}   他还是function函数
  //函数名:()=>{}  箭头函数

  //切换侧边栏状态
  TOGGLE_SIDEBAR: state => {
    state.sidebar.opened = !state.sidebar.opened//它只能影响vuex里的变量值
    state.sidebar.withoutAnimation = false //使用过渡动画
    //本地存储的值也要同步
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', 1)//1是打开，0是关闭，但是存入到本地就变成字符串，所以上面处理了
    } else {
      Cookies.set('sidebarStatus', 0)
    }
  },
  //关闭侧边栏（影响state值）
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    Cookies.set('sidebarStatus', 0)
    state.sidebar.opened = false
    state.sidebar.withoutAnimation = withoutAnimation//关闭时，是否使用过渡动画
  },
  //切换设备标记
  TOGGLE_DEVICE: (state, device) => {
    //形参decice值：
    state.device = device
  }
}

const actions = {
  //切换侧边栏导航
  toggleSideBar ({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
  //关闭侧边栏
  //原来写法
  //closeSideBar(store,val){}
  //val={withoutAnimation:false} val接收传过来的对象
  //知识点：形参对象的解构赋值
  // { withoutAnimation: withoutAnimation } = { withoutAnimation: false }
  // closeSideBar(store, { withoutAnimation }) {}
  // 总结: 接收实参里面withoutAnimation的值到此变量上
  closeSideBar ({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  toggleDevice ({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  }
}

export default {
  namespaced: true,// 开启命名空间: 避免污染, 影响state, mutations, getters, actions的使用
  state,
  mutations,
  actions
}
